<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>社保计算器</title>
				    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
				    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
				    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
				    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
					<script>
					 $(function(){
						 $("#btn").click(function(){
							let sal =$("#sal").val()
							if(sal ==""||sal == null||sal.length==0){
							alert("请输入工资")
							}else{
							
							sal =parseInt(sal)
							let old1=sal*0.08
							
							$("#old1").text(old1)
							let old2=sal*0.2
							$("#old2").text(old2)
							
							let yl1=sal*0.02
							$("#yl1").text(yl1)
							let yl2=sal*0.06
							$("#yl2").text(yl2)
							
							let sy1=sal*0.005
							$("#sy1").text(sy1)
							
							let sy2=sal*0.015
							$("#sy2").text(sy2)
							
							let gs=sal*0.005
							$("#gs").text(gs)
							
							let sy=sal*0.008
							$("#sy").text(sy)
							
							let gjj1=sal*0.12
							$("#gjj1").text(gjj1)
							

							let gjj2=sal*0.12
							$("#gjj2").text(gjj2)
							

							let hj1=old1+yl1+sy1+gjj1
							$("#hj1").text(hj1)
							
							let hj2=old2+yl2+sy2+gs+sy+gjj2
							$("#hj2").text(hj2)
							
							let ze=hj1+hj2
							$("#ze").text(ze)}
							})
								})
							</script>
							</head>
						<body>
							<div class="container">
								 <h3 class="text-danger text-center">社保计算器--网页版</h3>
								 <p class="text-center ">太原工业学院&nbsp;&nbsp;电子系&nbsp;&nbsp;182027305&nbsp;&nbsp;王彦</p>
								 <div class="tableDiv container">
									<table class="table table-bordered table-striped text-center">
										<tr>
											<td>工资</td>
										    <td colspan="3">
												<input id="sal" type="text" class="form-control" name="sal"/>
										</td>
										<td>
											<button id="btn" class="btn btn-danger" >计算</button>
										</td>
										</tr>
										<tr>
											<td class="bg-primary">险种</td>
											<td class="bg-primary">个人%</td>
											<td class="bg-primary">个人</td>
											<td class="bg-primary">公司%</td>
											<td class="bg-primary">公司</td>
										</tr>
										<tr>
											<td>养老</td>
											<td>8%</td>
											<td id="old1"></td>
											<td>20%</td>
											 <td id="old2"></td>
										</tr>
										<tr>
											<td>医疗</td>
											<td>2%</td>
											<td id="yl1"></td>
											<td>6%</td>
											 <td id="yl2"></td>
										</tr>
										<tr>
											<td>失业</td>
											<td>0.5%</td>
											<td id="sy1"></td>
											<td>1.5%</td>
											 <td id="sy2"></td>
										</tr>
										<tr>
											<td>工伤</td>
											<td></td>
											<td ></td>
											<td>0.5%</td>
											 <td id="gs"></td>
										</tr>
										<tr>
											<td>生育</td>
											<td></td>
											<td ></td>
											<td>0.8%</td>
											 <td id="sy"></td>
										</tr>
										<tr>
											<td>公积金</td>
											<td>12%</td>
											<td id="gjj1"></td>
											<td>12%</td>
											 <td id="gjj2"></td>
										</tr>
										<tr>
											<td>合计</td>
											<td>个人合计</td>
											<td id="hj1"></td>
											<td>公司合计</td>
											 <td id="hj2"></td>
										</tr>
										<tr>
											<td>总额</td>
											<td id="ze" colspan="4" style="font-size: 15pt;color: #00FFFF;"></td>
										</tr>
									</table> 
									 
								 </div>
								 
							</div>
						</body>
					</html>
	
